<template>
  <el-container class="datasourceeddit_container">
    <el-header>
      <h1>{{title}}</h1>
    </el-header>

    <el-main>
      <el-form
        :model="formData"
        :rules="rules"
        ref="dform"
        label-position="left"
        label-width="200px"
      >
        <el-form-item label="数据源名称" prop="datasourceName">
          <el-input v-model="formData.datasourceName"></el-input>
        </el-form-item>

        <el-form-item label="数据源连接字符串" prop="datasourceUrl">
          <el-input v-model="formData.datasourceUrl"></el-input>
        </el-form-item>

        <el-form-item label="数据源用户名" prop="datasourceUsername">
          <el-input v-model="formData.datasourceUsername"></el-input>
        </el-form-item>

        <el-form-item label="数据源密码" prop="datasourcePassword">
          <el-input v-model="formData.datasourcePassword"></el-input>
        </el-form-item>

         <el-form-item label="数据源驱动类名" prop="datasourceDriver">
          <el-input v-model="formData.datasourceDriver"></el-input>
        </el-form-item>

        <el-form-item label="数据源描述">
          <el-input type="textarea" v-model="formData.datasourceDesc"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
      
          
          <el-button @click="cancle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
export default {
  props: ["type", "id"],

  data() {
    return {
      title: "",
      formData: {
        datasourceId: "",
        datasourceName: "",
        datasourceUrl: "",
        datasourceUsername: "",
        datasourcePassword: "",
        datasourceDesc: "",
        datasourceDriver:""
      },

      rules: {
        datasourceName: [
          { required: true, message: "请输入数据源名称", trigger: "blur" },
          { min: 1, max: 50, message: "最长50个字符", trigger: "blur" }
        ],

        datasourceUrl: [
          { required: true, message: "请输入数据源url", trigger: "blur" },
          { min: 1, max: 100, message: "最长100个字符", trigger: "blur" }
        ],

        datasourceUsername: [
          { required: true, message: "请输入数据源用户名", trigger: "blur" },
          { min: 1, max: 20, message: "最长20个字符", trigger: "blur" }
        ],

        datasourceDriver: [
          { required: true, message: "请输入数据源驱动类名", trigger: "blur" },
          { min: 1, max: 50, message: "最长20个字符", trigger: "blur" }
        ],

        datasourcePassword: [
          { required: true, message: "请输入数据源密码", trigger: "blur" },
          { min: 1, max: 20, message: "最长20个字符", trigger: "blur" }
        ]
      }
    };
  },

  mounted() {
    this.datasourceId = this.id;

    if (this.type == "UPDATE") {
      this.loadDataSource();
      this.title = "编辑数据源";
    } else {
      this.title = "添加数据源";
    }
  },

  methods: {
    loadDataSource() {
      this.$axios
        .get("/datasource/getOne?id=" + this.id)
        .then(data => {
          this.formData = data.data;
        })

        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "数据加载失败"
          });
        });
    },

    cancle() {

        this.$router.back(-1);
    },
    submitForm() {
      if (
        this.$refs.dform.validate(valid => {
          if (valid) {
            if (this.type == "UPDATE") {
              this.update();
            } else if (this.type == "INSERT" && this.id != "") {
              this.add();
            }
          }
        })
      );
    },




    add() {
      this.$axios
        .post("/datasource/add", this.formData)
        .then(data => {
          this.$notify({
            title: "成功",
            message: "添加成功",
            type: "success"
          });

          this.$router.back(-1);
        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "添加失败",
            type: "success"
          });
        });
    },

    update() {
      this.$axios
        .post("/datasource/update", this.formData)
        .then(data => {
          this.$notify({
            title: "成功",
            message: "更新成功",
            type: "success"
          });

          this.$router.back(-1);
        })
        .catch(e => {
          this.$notify.error({
            title: "失败",
            message: "更新失败",
            type: "success"
          });
        });
    }
  },
  watch:{

      type(nv,ov){


        if (nv == "UPDATE") {
            this.loadDataSource();
            this.title = "编辑数据源";
        } else {
            this.title = "添加数据源";
            
        }

      }

  }
};
</script>

<style>
.datasourceeddit_container {
  max-width: 600px;
  height: 100%;
}
</style>
